<div style="display: flex;flex-direction: row;align-items: center;" (mouseenter)="!readOnly && showEditIcon()"
    (mouseleave)="!readOnly && hideEditIcon()">
    <mat-chip-list aria-label="chip list selection" *ngIf="inputValue">
        <mat-chip>
            {{inputValue&&inputValue.label|translate}}
        </mat-chip>
    </mat-chip-list>
    <button *ngIf="!readOnly" mat-icon-button [matMenuTriggerFor]="menu" (click)="lockEditIcon=true">
        <mat-icon [ngStyle]="{'visibility':lockEditIcon || displayEdit}" [color]="'primary'"
            style="padding-right: 8px;cursor: pointer;">edit
        </mat-icon>
    </button>
    <mat-menu #menu="matMenu" (closed)="lockEditIcon=false">
        <ng-template matMenuContent>
            <button *ngFor="let e of list" mat-menu-item (click)="doUpdate(e)">
                {{e.label|translate}}
            </button>
            <ng-container *ngIf="!allLoaded && !loading">
                <div #ghostRef style="display: flex;justify-content: center;">
                    <mat-progress-spinner [color]="'primary'" [mode]="'indeterminate'" [diameter]="40">
                    </mat-progress-spinner>
                </div>
            </ng-container>
        </ng-template>
    </mat-menu>
</div>